<template>
  <div style="padding:10px">
    <!-- 功能区域 -->
    <div style="margin:10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button @click="axiosPro">Pro</el-button>
      <el-button @click="axiosGET">发起GET请求</el-button>
      <el-button @click="axiosPOST">发起POST请求</el-button>
      <el-button @click="get">axios.get</el-button>
      <el-button @click="post">axios.post</el-button>
    </div>
    <!-- 搜索区域 -->
    <div style="margin:10px 0">
      <el-input v-model="search" placeholder="请输入关键词" style="width:20%" clearable></el-input>
      <el-button type="primary" style="margin-left:10px" @click="load">查询</el-button>
    </div>
    <!--    table-->
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="ID"  sortable/>
      <el-table-column prop="username" label="用户名"  />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="封面" >
        <template #default="scope" >
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
              preview-teleported="true">
          </el-image>
        </template>
      </el-table-column>>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text" size="small" >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <div style="margin:10px 0">
      <!--       v-model:currentPage="currentPage"-->
      <!--       v-model:page-size="pageSize4"-->
      <el-pagination
          :currentPage="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <!--新增-弹窗-->
  </div>
</template>

<script>
import { dataType } from 'element-plus/es/components/table-v2/src/common';
import request from "@/utils/Request";
import axios from "axios";

export default {
  name: 'Axios',
  components: {

  },
  data(){
    return{

    }
  },
  //测试commit-2
  methods:{
    axiosPro(){
      // // 1. 调用axios方法得到的返回值是promise对象
      // const result = axios({
      //   // 2. 请求方式
      //   method:'GET',
      //   // 3. 请求地址
      //   url:'http://liulongbin.top:3006/api/getBooks'
      // })
      // result.then(function(books){
      //   console.log(books.data)
      // })

      // 简写
      axios({
        method:'GET',
        url:'http://liulongbin.top:3006/api/getBooks',
        // URL中的查询参数(GET获取)
        params:{
          id:1
        },
        // 请求体参数(POST上传)
        data:{}
      }).then(function(result){
        console.log(result.data.data)}
      )
      // 这里result = books
    },
    async axiosGET(){
      //解构赋值时，使用：进行重命名
      const {data:res} = await axios({
        method:'GET',
        url:'http://liulongbin.top:3006/api/getBooks',
      })
      console.log(res.data)
    },
    async axiosPOST(){
      //如果调用某方法的返回值是promise实例，则前面可以添加await进行简化
      //await只能用在被async修饰的方法中
      //解构赋值
      const {data} = await axios({
        method:'POST',
        url:'http://liulongbin.top:3006/api/post',
        data:{
          name:'zs',
          age:20
        }
      })
      console.log(data)
    },
    async get(){
      /*axios.get('url地址'，{
        GET参数
        params:{}
      })*/
      const {data:res} = await axios.get('http://liulongbin.top:3006/api/getBooks',{
        params:{id:1}
      })
      console.log(res)
    },
    async post(){
      // axios.post('url',{POST请求体数据})
      const {data:res} = await axios.post('http://liulongbin.top:3006/api/post',{name:'zs',gender:'女'})
      console.log(res)
    },
  }
}
</script>
